<template>
  <div class="titan-translate">
    <titan-translate-item
      :content="content"
      :is-origin="[true, false, true, true][mode]"
      :translate-content="translateText"
      :max="max"
      :loading="loading"
      :mode="mode"
      @translate="handleTransData"
    >
      <span v-if="mode !== 3">
        <span
          v-if="loading"
          class="titan-translate_text"
        >
          翻译中...
        </span>
        <span
          v-if="translateError === 0 && !loading"
          @click.stop="handleTransData"
          class="titan-translate_text cursor-pointer"
        >
          翻译失败，点击重新翻译
        </span>
        <span
          v-if="translateError === 1 && !loading"
          class="titan-translate_text"
        >
          暂不支持当前语言翻译
        </span>
      </span>
    </titan-translate-item>

    <titan-translate-item
      v-if="mode === 3"
      :content="content"
      :is-origin="false"
      :max="max"
      :loading="loading"
      :translate-content="translateText"
      :mode="mode"
      @translate="handleTransData"
    >
      <span
        v-if="loading"
        class="titan-translate_text"
      >
        翻译中...
      </span>
      <span
        v-if="translateError === 0 && !loading"
        @click.stop="handleTransData"
        class="titan-translate_text cursor-pointer"
      >
        翻译失败，点击重新翻译
      </span>
      <span
        v-if="translateError === 1 && !loading"
        class="titan-translate_text"
      >
        暂不支持当前语言翻译
      </span>
    </titan-translate-item>
  </div>
</template>

<script setup lang="ts">
  import TitanTranslateItem from "./TranslateItem.vue";
  import { ITranslate } from "@/components/translate/src/types";
  import { ref, watch } from "vue";
  import { postTranslate } from "@/api/modules/translate";

  defineOptions({
    name: "TitanTranslate",
  });

  const props = withDefaults(defineProps<ITranslate>(), {
    content: "",
    translateContent: "",
    max: 0,
    mode: 1, // 1 优先译文 2 优先原文 3 原文 + 译文
    srcLang: "zs", // 目标语言
    sourceLang: "", // 源语言
  });

  const loading = ref(false);
  const translateError = ref(2);
  const translateText = ref("");

  const init = () => {
    if (props.mode !== 2) {
      handleTransData();
    }
  };

  const handleTransData = async () => {
    // 外部传入译文直接赋值
    if (props.translateContent) {
      translateText.value = props.translateContent;
    }
    if (translateText.value) return;
    try {
      loading.value = true;
      const res = await postTranslate({
        src_lang: props.srcLang,
        src_text: props.content,
        target_lang: props.sourceLang,
      });
      translateText.value = res as unknown as string;
    } catch (e) {
      console.log(e);
      if (String(e).includes("不支持")) {
        translateError.value = 1;
        return;
      }
      // 翻译失败
      translateError.value = 0;
    } finally {
      loading.value = false;
    }
  };

  watch(
    () => props.content,
    () => {
      init();
    },
    { immediate: true }
  );
</script>
